<template>
  <div class="fy-titles" v-if="g">
    <!-- 食物类型 -->
    <div class="Fy-Foodtype">
      <div class="fy-left">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-4 w-4 text-gray-900"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          width="30"
          height="30"
        >
          <path
            strokelinecap="round"
            strokelinejoin="round"
            strokewidth="2"
            d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"
          ></path>
        </svg>
      </div>
      <div style="height: 60px">
        <el-button
          size="mini"
          round
          v-for="(x, i) in g.data.images.slice(0, 6)"
          :key="i"
          @click.native="goNav(x.name)"
          >{{ x.name }}</el-button
        >
      </div>

      <h2>
        <router-link to="">{{ g.data.kind }}</router-link>
      </h2>
      <p v-html="g.data.detail">
        <!-- 包子，本称馒头，别称笼饼，传为诸葛亮所发明，是一种饱腹感很强的主食，是中国传统食品，并且还是人们生活中不可或缺的食物。<br />
        “包子”一词最早出现自宋代，此前主要被称为”馒头“。传为诸葛亮征孟获时所发明，形状为人头形，尔后随着历史的发展演变... -->
      </p>
    </div>
    <!-- 食物图片 -->
    <div class="Fy-Foodimg">
      <div class="foodimg-left" @click="goNav(g.data.images[0].name)">
        <img :src="`https://ichf.cn${g.data.images[0].image}`" alt="" />
      </div>
      <div class="foodimg-right" v-if="g.data.images.slice(1)">
        <div v-for="x in g.data.images.slice(1, 5)" :key="x">
          <img
            :src="`https://ichf.cn${x.image}`"
            alt=""
            @click="goNav(x.name)"
          />
        </div>
        <!-- <div></div>
        <div></div>
        <div></div> -->
      </div>
    </div>
    <!-- 食物评价 -->
    <div class="Fy-Foodcomment">
      <el-rate
        style="width: 200px"
        v-model="value"
        disabled
        show-score
        text-color="#ff9900"
        score-template="{value}"
      >
      </el-rate>
      <p>{{ g.data.score }}</p>
    </div>
  </div>
</template>

<script>
export default {
  props: ["g"],
  data() {
    return {
      value: 4,
    };
  },
  methods: {
    //跳美食详情
    goNav(e) {
      // console.log(e);
      this.$router.push("/nav?name=" + e);
    },
  },
  mounted() {
    console.log(this.g);
  },
};
</script>

<style lang="scss" scoped>
.fy-titles {
  position: relative;
  // display: flex;
  // flex-direction: column;
  // justify-content: space-evenly;
  width: 33rem;
  height: 28rem;
  max-width: 40rem;
  max-height: 40rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 10px;
  background-color: #dde7e4;
  padding: 20px;
  //   食物类型

  .Fy-Foodtype {
    position: relative;
    .fy-left {
      position: absolute;
      right: -1.3rem;
      top: -1.3rem;
      background-color: rgba(122, 120, 120, 0.596);
      border-bottom-left-radius: 5px;
      border-top-right-radius: 10px;
    }
    a {
      margin-left: 20px;
      color: black;
      text-decoration: none;
    }
    p {
      margin: 12px;
      display: -webkit-box;
      word-break: break-all;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: pre-line;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
    }
    button {
      padding: 5px 10px 5px 10px;
      margin: 0 5px 6px 0;
      font-weight: 700;
      color: #065f46;
      background-color: #a7f3d0;
      border: 0;
    }
  }
  //   食物照片
  .Fy-Foodimg {
    position: relative;
    bottom: -10px;
    display: flex;
    box-sizing: border-box;
    padding: 10px 0;
    // margin-bottom: 10px;
    width: 100%;
    height: 50%;
    border-radius: 10px;
    .foodimg-left {
      width: 50%;

      // margin: 30px 0;
      // background-color: #065f46;
      > img {
        width: 100%;
        height: 100%;
        vertical-align: middle;
        border-radius: 10px;
      }
    }
    .foodimg-right {
      display: flex;

      //   background-color: #a7f3d0;
      width: 50%;
      flex-flow: wrap;
      div {
        margin-left: 5px;
        width: 45%;
        height: 48%;
        overflow: hidden;
        // background-color: black;
        > img {
          width: 100%;
          height: 100%;
          vertical-align: middle;
          border-radius: 10px;
        }
      }
    }
  }
}
.Fy-Foodcomment {
  position: absolute;
  bottom: 0;
  display: flex;
  width: 90%;
  border-top: 1px solid rgb(129, 128, 128);
  padding: 10px;
  p {
    font-size: 14px;
  }
}
</style>
